﻿@{
    Layout = "~/_Layout.cshtml";
    Page.Title = "Site Extensions";
}

@section PageHead {
    <link href="//functionscdn.azureedge.net/public/kudu/font-awesome/4.0.2/css/font-awesome.css" rel="stylesheet" />
    <link href="../Content/Styles/SiteExtensions.css" rel="stylesheet" />
}

<div class="container">
    <div class="row navbar">
        <div class="col-xs-4" id="tabHeadings">
            <ul class="nav nav-tabs" id="navTabs">
                <li class="active"><a href="#installed" data-toggle="tab">Installed</a></li>
                <li><a href="#gallery" data-toggle="tab">Gallery</a></li>
            </ul>
        </div>
        <div class="col-xs-5" id="searchBox">
            <form class="navbar-form" role="search">
                <div class="form-group">
                    <input type="text" class="form-control" id="searchText" data-bind="value: searchTerms" placeholder="Site Extension" />
                </div>
                <button class="btn btn-default" type="button" id="searchButton">
                    <span>Search</span>
                </button>
                <button class="btn btn-default" type="button" id="clearButton">
                    <span>Clear</span>
                </button>
            </form>
        </div>
        <div class="col-xs-3">
            <form class="navbar-form">
                <button class="btn btn-default button-top-right" type="button" id="restartButton" data-toggle="popover" data-placement="auto right"
                        data-animation="true" data-html="true" data-trigger="manual">
                    <span>Restart Site</span>
                </button>
            </form>
        </div>
    </div>

    <div class="alert alert-warning alert-dismissable" id="extensionsTermsAndConditions">        
        <span id="extensionsTermsAndConditionsText">By installing the site-extension you agree to nuget.org terms of service 
        <a href="https://www.nuget.org/policies/Terms" target="_blank">NuGet Gallery | Terms and Conditions</a></span>
    </div>

    <div class="alert alert-success alert-dismissable" id="successNotification" aria-hidden="true">
        <button type="button" class="close" id="successNotificationClose" aria-hidden="true">&times;</button>
        <span id="successNotificationText"></span>
    </div>

    <div class="alert alert-warning alert-dismissable" id="errorNotification" aria-hidden="true">
        <button type="button" class="close" id="errorNotificationClose" aria-hidden="true">&times;</button>
        <span id="errorNotificationText"></span>
    </div>

    <div class="row">
        <div class="tab-content">
            <div class="tab-pane active" id="installed">
                <p data-bind="visible: loadingInstalled() && display().length === 0 && searchTerms().length === 0">Loading...</p>
                <p data-bind="visible: !loadingInstalled() && display().length === 0 && searchTerms().length === 0">Site extensions can be installed from the Gallery.</p>
            </div>
            <div class="tab-pane" id="gallery">
                <p data-bind="visible: loadingGallery() && display().length === 0 && searchTerms().length === 0">Loading...</p>
            </div>
        </div>

        <div class="row" id="tiles" data-bind="foreach: display">
            <div class="col-xs-12 col-sm-6 col-md-4 col-lg-3">
                <div class="thumbnail">
                    <div class="row">
                        <div class="col-xs-3">
                            <a href="#">
                                <img data-bind="attr: { src: icon_url }, click: $parent.details"
                                     alt="Icon" class="tile-icon" data-toggle="modal" data-target="#detailsModal" />
                            </a>
                        </div>
                        <div class="col-xs-9">
                            <button class="btn btn-info button-bottom-left installDialog" role="button" data-bind="visible: primaryAction() === 'Install'"
                                    data-toggle="modal" data-target="#installModal" data-placement="top" title="Install">
                                <i class="fa fa-plus"></i>
                            </button>
                            <button class="btn btn-info button-bottom-left" role="button" data-bind="visible: primaryAction() === 'Wait'"
                                    data-toggle="modal" data-target="#installModal" data-placement="top" title="Wait" disabled>
                                <i class="fa fa-spinner fa-spin"></i>
                            </button>
                            <a class="btn btn-info button-bottom-left" role="button" data-bind="visible: primaryAction() === 'Launch', attr: {href : extension_url, target : '_blank'}"
                               data-placement="top" title="Launch">
                                <i class="fa fa-play"></i>
                            </a>
                            <button class="btn btn-info button-bottom-left" role="button"
                                    data-toggle="modal" data-target="#detailsModal" data-bind="click: $parent.details"
                                    data-placement="top" title="Details">
                                <i class="fa fa-info-circle"></i>
                            </button>
                            <button class="btn btn-info button-bottom-left updateButton" role="button" data-bind="visible: local_is_latest_version === false"
                                    data-placement="top" title="Update">
                                <i class="fa fa-arrow-up"></i>
                            </button>
                            <button class="btn btn-info button-bottom-right removeButton" role="button" data-bind="visible: local_path"
                                    data-placement="top" title="Remove">
                                <i class="fa fa-times"></i>
                            </button>
                        </div>
                    </div>
                    <h4 data-bind="text: title"></h4>
                    <div class="text-6line">
                        <div data-bind="visible: version">
                            <strong>Version </strong>
                            <span class="text-1line" data-bind="text: version"></span>
                        </div>
                        <div data-bind="visible: authors">
                            <strong>By </strong>
                            <span class="text-1line" data-bind="text: authors"></span>
                        </div>
                        <div data-bind="visible: summary">
                            <p class="text-4line" data-bind="text: summary"></p>
                        </div>
                        <div data-bind="visible: (!summary) && description">
                            <p class="text-4line" data-bind="text: description"></p>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<!-- Modal -->
<div class="modal fade" id="detailsModal" tabindex="-1" role="dialog" aria-labelledby="detailsModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header" data-bind="with: detailedSiteExtension">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                <div class="row">
                    <div class="col-xs-2">
                        <img data-bind="attr: { src: icon_url }" alt="Icon" class="modal-icon" />
                    </div>
                    <div class="col-xs-10">
                        <h3 class="modal-title" data-bind="text: title"></h3>
                    </div>
                </div>
            </div>
            <div class="modal-body" data-bind="with: detailedSiteExtension">
                <strong>ID</strong>
                <p data-bind="text: id"></p>
                <strong>Version</strong>
                <p data-bind="text: version"></p>
                <div id="detailsDownloadCount" data-bind="visible: download_count">
                    <strong>Download Count</strong>
                    <p data-bind="text: download_count"></p>
                </div>
                <div id="detailsAuthors" data-bind="visible: authors">
                    <strong data-bind="visible: authors.length === 1">Author</strong>
                    <strong data-bind="visible: authors.length > 1">Authors</strong>
                    <p data-bind="text: authors"></p>
                </div>
                <div id="detailsFeedUrl" data-bind="visible: feed_url">
                    <strong>Feed Endpoint</strong>
                    <p><a data-bind="text: feed_url, attr: {href: feed_url, target: '_blank'}"></a></p>
                </div>
                <div id="detailsProjectUrl" data-bind="visible: project_url">
                    <strong>Project Homepage</strong>
                    <p><a data-bind="text: project_url, attr: {href: project_url, target: '_blank'}"></a></p>
                </div>
                <div id="detailsLicenseUrl" data-bind="visible: license_url">
                    <strong>License</strong>
                    <p><a data-bind="text: license_url, attr: {href: license_url, target: '_blank'}"></a></p>
                </div>
                <div id="detailsPublishedDateTime" data-bind="visible: (!installed_date_time) && published_date_time">
                    <strong>Published Time</strong>
                    <p data-bind="text: published_date_time"></p>
                </div>
                <div id="detailsLocalPath" data-bind="visible: local_path">
                    <strong>Installed Path</strong>
                    <p data-bind="text: local_path"></p>
                </div>
                <div id="detailsInstalledDateTime" data-bind="visible: installed_date_time">
                    <strong>Installed Time</strong>
                    <p data-bind="text: installed_date_time"></p>
                </div>
                <div id="detailsSummary" data-bind="visible: summary">
                    <strong>Summary</strong>
                    <p data-bind="text: summary"></p>
                </div>
                <div id="detailsDescription" data-bind="visible: description">
                    <strong>Description</strong>
                    <p data-bind="text: description"></p>
                </div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
            </div>
        </div>
    </div>
</div>

<!-- Modal -->
<div class="modal fade" id="installModal" tabindex="-1" role="dialog" aria-labelledby="installModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header" data-bind="with: detailedSiteExtension">
                <span>Acknowledgement</span>
            </div>
            <div class="modal-body" data-bind="with: detailedSiteExtension">
                <span>
                    By clicking the <strong>Install</strong> button, I acknowledge that I am getting
                    <strong data-bind="text: title"></strong> from
                    <strong data-bind="text: authors"></strong>
                    and that the <a data-bind="attr: {href: license_url, target: '_blank'}">legal terms</a> of <strong data-bind="text: authors"></strong> apply to it.
                    Microsoft does not guarantee the contribution or purport to grant rights to it.
                </span>
            </div>
            <div class="modal-footer">
                <button class="btn btn-info button-bottom-left installButton" role="button" data-placement="top" data-dismiss="modal" title="Install">
                    Install
                </button>
                <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
            </div>
        </div>
    </div>
</div>

<script type="text/javascript" src="//ajax.aspnetcdn.com/ajax/knockout/knockout-3.0.0.js"></script>
<script type="text/javascript" src="../Content/Scripts/SiteExtensions.js"></script>
